<template>
  <BaseDialog :footer="true" title="选择成员" width="1100px" :dialog-show.sync="dialogShow">
    <div class="selector-container">
      <div class="selector-left">
        <el-tabs v-model="tabActive">
          <el-tab-pane label="部门" name="department" />
          <el-tab-pane label="成员组" name="member" />
        </el-tabs>
        <div v-show="tabActive == 'department'" class="user-search">
          <el-input size="small" placeholder="搜索选中部门下的成员">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <div class="tree-scroll">
            <el-tree :data="data" :props="{
              children: 'children',
              label: 'label'
            }" @node-click="handleNodeClick" />
          </div>
        </div>
        <div v-show="tabActive == 'member'" class="tree-scroll member-group">
          <el-input v-if="isAddGroup" size="small" placeholder="请输入组名称" @blur="handleInputBlur" />
          <div v-else class="add-member" @click="handleAddInput">
            <i class="el-icon-circle-plus-outline" />
            新增成员组
          </div>
        </div>
      </div>
      <div class="selector-center">
        <el-tabs v-model="chooseTypeActive">
          <el-tab-pane name="member">
            <template slot="label">成员（0）</template>
          </el-tab-pane>
          <el-tab-pane name="lastTime">
            <template slot="label">上次选择（0）</template>
          </el-tab-pane>
        </el-tabs>
        <!-- <el-empty description="暂无数据" /> -->
        <div class="user-container">
          <div class="check-item">
            <el-tree :data="userData" show-checkbox node-key="id">
              <div slot-scope="{ node }" class="tree-item">
                <span>{{ node.label }}</span>
                <el-popover v-if="node.isCurrent" placement="right" trigger="hover">
                  <el-button type="text">新建分组</el-button>
                  <el-button type="text" slot="reference">添加到分组</el-button>
                </el-popover>
              </div>
            </el-tree>
          </div>
        </div>
        <div class="center-footer">
          <div v-if="chooseTypeActive == 'member'">
            <el-button type="text" @click="handleChooseUser('currentPage')">
              全选本页
            </el-button>
            <el-button type="text" @click="handleChooseUser('depart')">
              全选部门
            </el-button>
          </div>
          <el-button v-else type="text">全选</el-button>
          <el-pagination v-if="chooseTypeActive == 'member'" :page-size="10" layout="total, prev, jumper, next"
            :total="1000" />
        </div>
      </div>
      <div class="selector-right">
        <div class="right-header">
          <p>已选择成员（0）</p>
          <el-button type="text">清空</el-button>
        </div>
      </div>
    </div>
  </BaseDialog>
</template>

<script>
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkList: [],
      tabActive: 'department',
      chooseTypeActive: 'member',
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                },
                {
                  label: '三级 3-2-1'
                },
                {
                  label: '三级 3-2-1'
                },
                {
                  label: '三级 3-2-1'
                },
                {
                  label: '三级 3-2-1'
                },
                {
                  label: '三级 3-2-1'
                },
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      userData: [
        {
          label: '一级 1'
        },
        {
          label: '一级 1'
        },
        {
          label: '一级 1'
        }
      ],
      isAddGroup: false,
      userCheckedOptions: []
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // 成员组添加
    handleInputBlur() {
      this.isAddGroup = false
    },
    handleAddInput() {
      this.isAddGroup = true
    },
    // 全选用户
    handleChooseUser(type) {
      if (type == 'currentPage') {
        console.log(type)
      }
    }
  },
  watch: {
    checkList: {
      handler(val) {
        console.log(val)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.selector-container {
  border: 1px solid #e6e6e6;
  display: flex;

  ::v-deep {
    .el-tabs__nav-scroll {
      padding: 0 20px;
    }
  }
}

.selector-left {
  width: 30%;
  background: #f8f8f9;
  padding: 0 8px;
  box-sizing: border-box;
  border-right: 1px solid #e6e6e6;

  .tree-scroll {
    height: 340px;
    overflow-y: auto;
    padding-bottom: 20px;
    margin-top: 10px;
  }

  .member-group {
    text-align: center;

    .add-member {
      display: inline-block;
      color: var(--huocms-com-color-primary);
      cursor: pointer;
    }
  }
}

.selector-center {
  width: 40%;
  padding: 0 10px;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;

  .center-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px 10px 20px;
    display: flex;
    border-top: 1px solid #e6e6e6;
    align-items: center;
    justify-content: space-between;

    ::v-deep {
      .el-pagination {
        margin-bottom: 0 !important;
      }

      .el-pagination__jump {
        margin-left: 0;
      }
    }
  }

  .user-container {
    .tree-item {
      width: 100%;
      display: flex;
      padding-right: 10px;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.selector-right {
  width: 30%;
  padding: 0 10px;

  .right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
  }
}

::v-deep {
  .selector-left {
    .el-tree-node.is-current>.el-tree-node__content {
      color: #fff;
      background-color: var(--huocms-com-color-primary);
    }

    .el-tree {
      background: #f8f8f9;
    }
  }
}
</style>
